<template>
  <div class="zh-home">
    <div class="left">
      <div class="left-til">
        <router-link
          v-for="nav in subRoutes"
          :key="nav.id"
          v-text="nav.text"
          tag="span"
          :to="nav.path"
          :class="{ on: nav.path === querid }"
        />
      </div>

      <router-view></router-view>
    </div>

    <div class="right">
      <img src="@/assets/smzj.png" alt="" />
    </div>
  </div>
</template>




<script>
// 导入路由中我们所需的数据进行渲染

import { routes } from "@/router";

export default {
  data() {
    return { pathid: this.$route.path };
  },

  computed: {
    subRoutes() {
      return routes[0].children;
    },
    querid() {
      return this.$route.path;
    },
  },
  mounted() {
    console.log("$router", this.$router);
  },
  watch: {
    $route() {
      console.log("---$route", this.$route);
    },
  },
};
</script>




<style>
.on {
  color: rgb(0, 102, 255);
}
.zh-home {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.left {
  flex: 5;
  margin-right: 30px;
  background-color: #fff;
}
.right {
  flex: 2;
}
.left-til {
  line-height: 60px;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.left-til span {
  margin-left: 20px;
  cursor: pointer;
}
</style>
